<template>
  
  <div class="todo-info" @mouseenter="hovered = true;"  @mouseleave="hovered = false">
    <input type="text" v-model="todo.text" v-show="editting" v-focus @blur="editTodo" @keyup.13="editTodo">
    <span  @click="changeStatus" @dblclick="editting = true" v-show="!editting" :class="{'del-line': todo.done}" >{{todo.text}}</span>
    <strong @click="deleteTodo" v-show="hovered">x</strong>
  </div>

</template>

<style>
  .del-line {
    text-decoration: line-through;
  }
</style>

<script>

  export default {
    data () {
      return {
        hovered: false,
        editting: false
      }
    },
    props: {
      todo: Object
    },
    methods: {
      changeStatus () {
        this.$store.dispatch('toggleTodo', this.todo)
      },
      deleteTodo (e) {
        this.$store.dispatch('deleteTodo', this.todo)
      },
      editTodo (e) {
        this.$store.dispatch('editTodo', {text: e.target.value, todo: this.todo})
        this.editting = false
      }
    }
  }


</script>